<template>
  <!-- 消息详情 -->
  <div class="newsInfoBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      消息详情
      <div slot="right">
        <img src="../assets/img/share.png" alt class="shareImg" @click="sharePop=true" />
      </div>
    </x-header>
    <div class="vessel">
      <h2 class="newsTitle">{{newsTitle}}</h2>
      <img :src="newsImg" alt class="newsImg" />
      <div class="newsContent">{{newsContent}}</div>
      <div class="newsTime">
        {{newsTime}}
        <img src="../assets/img/Seal01.png" alt />
      </div>
    </div>
    <!-- 分享弹框 -->
    <popup v-model="sharePop" class="popupBox">
      <ul class="shareTo clearfix">
        <li>
          <img src="../assets/img/wechat.png" alt />
          <div class="shareHint">微信</div>
        </li>
        <li>
          <img src="../assets/img/pyq.png" alt />
          <div class="shareHint">朋友圈</div>
        </li>
        <li>
          <img src="../assets/img/qq.png" alt />
          <div class="shareHint">QQ</div>
        </li>
        <li>
          <img src="../assets/img/kongjian.png" alt />
          <div class="shareHint">QQ空间</div>
        </li>
        <li>
          <img src="../assets/img/weibo.png" alt />
          <div class="shareHint">微博</div>
        </li>
      </ul>
      <div class="cancel" @click="sharePop=false">取消</div>
    </popup>
  </div>
</template>

<script>
import { XHeader, Popup, } from 'vux'
export default {
  components: {
    XHeader,
    Popup,
  },
  data() {
    return {
      newsImg: require('../assets/img/img_news.png'),
      newsTitle: '消息标题实例消息标题实例消息标题实例消息标题实例！！',
      newsContent: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容',
      newsTime: '2019-06-03',
      sharePop: false,
    }
  },
  created() {
    // 获取消息页面传递的id查询相应消息详情
    let id = this.$route.params.newsId
    this.getNewsInfo(id)
  },
  methods: {
    shareShow() {
      alert(222)
    },
    getNewsInfo(id) {
      this.$http.get('url', {
        params: {
          userId: id
        }
      }).then(res => {
        // 失败响应
      }).catch(
        // 失败响应
      )
    }
  }
}
</script>

<style lang="less" scoped>
.newsInfoBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
  }
  .shareImg {
    width: 40px;
    height: 40px;
  }
  .vessel {
    padding: 20px;
    .newsTitle {
    }
    .newsImg {
      width: 100%;
    }
    .newsContent {
      font-size: 28px;
      text-indent: 2em;
    }
    .newsTime {
      position: relative;
      font-size: 30px;
      text-align: right;
      margin-top: 80px;
      img {
        position: absolute;
        right: 10px;
        bottom: -30px;
        width: 140px;
      }
    }
  }
  .popupBox {
    .shareTo {
      list-style: none;
      padding-bottom: 80px;
      li {
        text-align: center;
        color: #5a5b5d;
        float: left;
        width: 30%;
        margin: 20px 0;
        margin-right: 4%;
        img {
          width: 60%;
        }
        .shareHint {
          font-size: 28px;
        }
      }
      li:nth-child(3n) {
        margin-right: 0;
      }
    }
    .cancel {
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      height: 80px;
      line-height: 80px;
      font-size: 28px;
    }
  }
}
</style>